<template>
	<section class="login w-full h-[100vh] relative">
		<video
			class="w-full h-full object-cover absolute"
			autoplay
			loop
			muted
		>
			<source
				src="@/assets/video.mp4"
				type="video/mp4"
			/>
		</video>

		<div class="form text-center absolute w-[400px] z-100 bg-[rgba(0,0,0,.65)] rounded-[5px] p-[30px] absolute top-[50%] right-[80px] transform translate-y-[-50%]">
			<img
				class="w-[150px] my-10px mx-auto"
				src="@/assets/icon-logo.png"
				alt="logo"
			/>

			<div class="color-[#ffffffa6] text-12px">便捷、稳定、想象、连接</div>

			<a-form
				ref="formRef"
				:rules="rules"
				:model="form"
			>
				<a-tabs @change="tabsChange">
					<a-tab-pane
						title="账号密码登录"
						:key="0"
					>
						<a-form-item
							field="username"
							validate-trigger="blur"
						>
							<a-input
								v-model="form.username"
								placeholder="请输入用户名"
								maxlength="11"
								@keyup.enter="handleSubmit"
							></a-input>
						</a-form-item>

						<a-form-item
							class="mb-0!"
							field="value"
							validate-trigger="blur"
						>
							<a-input
								v-model="form.value"
								placeholder="请输入密码"
								type="password"
								@keyup.enter="handleSubmit"
							></a-input>
						</a-form-item>
					</a-tab-pane>

					<a-tab-pane
						title="手机号登录"
						:key="1"
					>
						<a-form-item
							field="username"
							validate-trigger="blur"
						>
							<a-input
								v-model="form.username"
								placeholder="请输入手机号"
							></a-input>
						</a-form-item>

						<a-form-item
							field="value"
							class="code-item mb-0!"
							validate-trigger="blur"
						>
							<a-input
								v-model="form.value"
								placeholder="请输入验证码"
							></a-input>
							<a-button @click="sendCode">
								{{ remaining == 0 ? '获取验证码' : `${remaining}秒后获取` }}
							</a-button>
						</a-form-item>
					</a-tab-pane>
				</a-tabs>

				<a-form-item class="forget-item">
					<a-checkbox v-model="isAuto">自动登录</a-checkbox>

					<div>忘记密码</div>
				</a-form-item>

				<a-button
					type="primary"
					:loading="loading"
					@click="handleSubmit"
					class="w-full"
				>
					登录
				</a-button>
			</a-form>
			<TenantListDrawer
				:loading="loading"
				ref="tenantListDrawerRef"
			/>
		</div>
	</section>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import TenantListDrawer from './TenantListDrawer.vue';
	import { useCompRef } from '@/hooks/useComp';
	import { type FormInstance, Message } from '@arco-design/web-vue';
	import { ApiSceneValid } from '@/api/system/auth';
	import { TENANT_ID } from '@/utils/http/types';
	import type { TenantEntity } from '@/entity/UserEntity';
	import { useAuthStore } from '@/stores/modules/auth';
	import { useEnv } from '@/hooks/useEnv.ts';
	import { useCountdown } from '@vueuse/core';

	const authStore = useAuthStore();

	const rules = ref({
		username: [
			{
				required: true,
				trigger: 'blur',
				validator: (value: string, cb: (v?: string) => void) => {
					if (!value) {
						return form.value.scene === 0 ? cb('请输入用户名') : cb('请输入手机号');
					}
					cb();
				},
			},
		],
		value: [
			{
				required: true,
				trigger: 'blur',
				validator: (value: string, cb: (v?: string) => void) => {
					if (!value) {
						return form.value.scene === 0 ? cb('请输入手机号') : cb('请输入验证码');
					}
					cb();
				},
			},
		],
	});

	const isAuto = ref<boolean>(false);

	const tenantListDrawerRef = useCompRef(TenantListDrawer);

	const formRef = ref<FormInstance>();

	const loading = ref(false);

	const form = ref({
		username: '',
		value: useEnv('DEV') ? '123456' : '',
		scene: 0,
	});

	function tabsChange(key: number) {
		form.value.scene = key;
		formRef.value?.resetFields();
	}

	const countdown = shallowRef(0);

	const { start, remaining } = useCountdown(0, {});

	/**
	 * 发送验证码
	 */
	async function sendCode() {
		if ((await formRef.value?.validateField('username')) || countdown.value > 0) return;

		// api 请求成果后处理倒计时
		Message.success('验证码已发送');
		start(60);
	}

	async function handleSubmit() {
		if (await formRef.value?.validate()) return null;

		const data = await ApiSceneValid(form.value, { loading });

		/**
		 * 单个租户的情况
		 */
		if (data.tenants.length === 1) {
			const tenant = data.tenants[0];
			await handleLogin({
				tenant,
				...data,
			});
			return;
		}

		/**
		 * 多个租户的情况
		 */
		tenantListDrawerRef?.value?.open(data.tenants, async (tenant: TenantEntity, _cancel: () => void) => {
			await handleLogin({
				tenant,
				...data,
			});
			_cancel?.();
		});
	}

	/**
	 * 处理登录
	 * @param data
	 */
	async function handleLogin(data: any) {
		await authStore.login(
			{
				tenant: data.tenant,
				tenants: data.tenants,
				form: {
					username: form.value.username,
					key: data.key,
				},
			},
			{
				loading,
				headers: {
					[TENANT_ID]: data.tenant.id,
				},
			},
		);
	}
</script>

<style scoped lang="scss">
	:deep(.arco-form) {
		.arco-tabs {
			margin-top: 30px;

			.arco-tabs-nav {
				&-tab {
					justify-content: center;
				}

				&::before {
					background-color: #333;
				}
			}

			.arco-tabs-tab {
				font-weight: bold;

				&:hover {
					.arco-tabs-tab-title::before {
						background-color: initial !important;
					}
				}
			}
		}

		.arco-form-item {
			.arco-form-item-label-col {
				display: none;
			}

			.arco-form-item-wrapper-col {
				width: 100% !important;
				flex: initial;
			}

			.arco-input-wrapper {
				background-color: initial;
				box-shadow: initial;
				border: 1px solid #333;
				color: white;
			}

			&.code-item {
				.arco-form-item-content {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.arco-input-wrapper {
						width: calc(100% - 120px);
					}

					.arco-btn {
						background-color: initial;
						border: 1px solid #333;
						height: 32px;
						line-height: 32px;
						color: white;
						font-size: 12px;
					}
				}
			}
		}
	}
</style>

<style lang="scss">
	.login {
		.forget-item {
			.arco-form-item-content {
				display: flex;
				justify-content: space-between;

				.arco-checkbox-label,
				& {
					color: var(--blue);
				}

				div {
					cursor: pointer;

					&:first-child {
						display: flex;
						align-items: center;

						.arco-checkbox {
							margin: 0 5px 0 -3px;
						}
					}
				}
			}
		}
	}
</style>
